<template>
	<view>
		<button @click="onSetTimeCall()" type="primary" plain="true">单次计时器setTimeout</button>
		<button @click="onSetTimewithParams('shimuheng',123)">单次计时器（带参）</button>
		<button @click="onSetTimeClear()" type="warn">取消单次计时器</button>
		<button @click="onInteral()" type="primary">周期计时器</button>
		<button @click="onInteralClear()" type="warn">取消周期计时器</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: "yyx",
				password: "123456",
				count: 0
			}
		},
		methods: {
			onSetTimeCall() {
				console.log("onSetTimeCall----->");

				// setTimeout(callback,ms,ayn[])
				this.timeoutID = setTimeout(() => {
					// 延时之后要执行的代码，2000ms就是2s
					console.log("我延时2s才打印")
				}, 2000)
			},
			onSetTimewithParams(name, pwd) {
				// 数据进来通过接口传递（封装）
				console.log("onSetTimewithParams-----> name:" + name + " password:" + pwd);
				// 一半不用这个
				// console.log("onSetTimewithParams-----> name:"+this.username+" password:"+this.password);
				// ()=>{}箭头函数、匿名函数
				setTimeout(() => {
					console.log("我可以传参了！" + name + pwd);
				}, 2000, name, pwd)
			},
			onSetTimeClear() {
				// timeoutID
				console.log("定时器被我取消了：" + this.timeoutID);
				clearTimeout(this.timeoutID)
			},
			onInteral() {
				this.interalID = setInterval(() => {
					this.count++;
					console.log("周期打印count：", this.count)
				}, 2000)
			},
			onInteralClear() {
				console.log("周期定时器被我取消了：" + this.interalID);
				clearInterval(this.interalID)
			}

		}
	}
</script>

<style>

</style>